<template>
  <div>
    <!-- <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>修改信息</el-breadcrumb-item>
    </el-breadcrumb> -->
    <br />
    <br />
    <div class="xiu-gai">
      <el-form
        style="width: 250px; margin-left: 100px; margin-top: 30px"
        :label-position="labelPosition"
        label-width="80px"
        :model="form"
        :rules="rules"
        ref="form"
      >
        <el-form-item label="头像上传" prop="img">
          <el-upload
            class="avatar-uploader"
            action
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <img v-if="form.img" :src="form.img" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名：" prop="shoujihao">
          <el-input v-model="form.shoujihao"></el-input>
        </el-form-item>
        <el-form-item label="性别：" prop="xingbie">
          <!-- <el-input v-model="form.xingbie"></el-input> -->
          <el-radio-group v-model="form.xingbie">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日：" prop="shengri">
          <!-- <el-input v-model="form.shengri"></el-input> -->
          <el-date-picker
            v-model="form.shengri"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="邮箱：" prop="youxiang">
          <el-input v-model="form.youxiang"></el-input>
        </el-form-item>
      </el-form>
      <div style="margin-left: 180px; margin-top: 50px">
        <el-button type="primary" @click="upSubmit">确认修改</el-button>
        <el-button type="warning" @click="resetForm">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import httpApi from "@/myaxios";
import ObsClient from "esdk-obs-browserjs/src/obs";


export default {
  data() {
    return {
      //上传图片
      imageUrl: "",
      initiateData: {
        option: {},
        uploadId: "",
      },
      fileUrl: "",
      dialogImageUrl: "",
      dialogVisible: false,

      value1: "",
      labelPosition: "right",
      // 表单数据
      form: {
        img: "",
        id: "",
        xingbie: "",
        shengri: "",
        shoujihao: "",
        youxiang: "",
      },
      // 验证规则
      rules: {
        img: [{ required: true, message: "该字段不能为空", trigger: "blur" }],
        shoujihao: [
          // 添加正则表达式 pattern: /^1[3|5|7|8|9]\d{9}$/，验证手机号是否正确
          { required: true, message: "请输入手机号", trigger: "change" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的号码格式",
            trigger: "change",
          },
        ],
        xingbie: [{ required: true, message: "请输入性别", trigger: "blur" }],
        shengri: [{ required: true, message: "请输入生日", trigger: "blur" }],
        youxiang: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    // 取消修改
    resetForm() {
      this.searchYongHu();
    },
    // 修改信息
    upSubmit() {
      console.log(this.form);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          httpApi.GuanLiApi.updateInfo(this.form).then((res) => {
            console.log(res);
            if (res.status == 200) {
              this.$router.push("/home/individual");
              this.$message.success("恭喜,修改成功！");
            } else {
              this.$message.success("修改失败，请检查填写格式！");
            }
          });
        }
      });
    },

    // 头像上传
    // handleAvatarSuccess(res, file) {
    //   this.img = URL.createObjectURL(file.raw);
    // },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //图片上传
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      // return isJPG && isLt2M;
      if (isJPG && isLt2M) {
        var obsClient = new ObsClient({
          access_key_id: "CEQDVNAZTLD4SDTQFCTA", // 你的ak
          secret_access_key: "hr4oEqbvC7R0nW6BgqQKI6fA9a6FznVr4W7nGqLM", // 你的sk
          server: "https://obs.cn-north-4.myhuaweicloud.com", // 你的endPoint  记得加入https://
        });
        obsClient.putObject({
          Bucket: "daoxiangcun", // 桶名
          Key: file.name, // 文件名
          SourceFile: file, //流文件
        });
        this.form.img = `https://daoxiangcun.obs.cn-north-4.myhuaweicloud.com/${file.name}`;
      }
    },
    // 个人信息请求
    searchYongHu() {
      let id = localStorage.getItem("id");
      httpApi.GuanLiApi.queryYongHu({ id }).then((res) => {
        console.log(res);
        // 回填   显示个人信息
        this.form = res.data[0];
        console.log(this.form);
      });
    },
  },

  mounted() {
    this.searchYongHu();
  },
};
</script>

<style lang="scss" scoped>
.xiu-gai {
  margin-top: 30px;
  margin-left: 100px;
  padding-left: 100px;
  padding-top: 30px;
  padding-bottom: 50px;
  background-color: rgb(239, 242, 245);
  width: 800px;
}
// 头像框
.tou-xiang {
  display: flex;
  align-items: center;
  margin-left: 100px;
}
.avatar-uploader .el-upload {
  border: 1px solid #292727;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
</style>
